<template>
  <div class="introduction">
    <el-col
      class="introduction_tag"
      v-for="(item, index) in introductionData"
      :key="index"
    >
      <i :class="['iconfont', item.icon]"></i>
<!--      <img :src="item.icon" alt="" />-->
      <div class="introduction_tag_name">{{ item.name }}</div>
      <div class="introduction_tag_description">{{ item.description }}</div>
    </el-col>
  </div>
</template>

<script>
export default {
  name: "service",
  components: {},
  data() {
    return {
      introductionData: [
        {
          icon: "iconicon1",
          // icon: require("../../../assets/image/home/360.png"),
          name: "快速接入",
          description:
            "只需要向服务提供商注册信息，并为订阅的服务付费，便可获得软件服务。"
        },
        {
          icon: "iconicon3",
          // icon: require("../../../assets/image/home/angle.png"),
          name: "跨平台操作",
          description:
            "借助互联网，客户可以在任何时间，任何地点，通过浏览器便可接入服务。"
        },
        {
          icon: "iconicon2",
          // icon: require("../../../assets/image/home/monitor.png"),
          name: "数据安全",
          description: "数据备份与恢复：对不同租户的数据进行备份和恢复；"
        },
        {
          icon: "iconicon4",
          // icon: require("../../../assets/image/home/smartphone.png"),
          name: "移动操作",
          description:
            "随时随地了解公司经营动态，移动审批流程，提高全要执行力与凝聚力。"
        }
      ]
    };
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
.introduction {
  display: flex;
  justify-content: center;
  padding-bottom: 130px;
}

.introduction_tag {
  width: 20%;
  padding: $fz20;
  color: $introduction_tit;

  .introduction_tag_name {
    font-size: $fz20;
  }
  .introduction_tag_description {
    font-size: $fz14;
  }
}
.introduction_tag {
  .iconfont {
    display: inline-block;
    /*width: 54px;*/
    /*height: 54px;*/
    margin-bottom: 36px;
    font-size: $fz64;
  }
}

/**
移动端样式
 */
@media screen and (max-width: $mobile_width) {

  .introduction {
    display: block;
  }

  .introduction_tag {
    width: 50% !important;

    .iconfont {
      /*width: 40px;*/
      /*height: 40px;*/
      font-size: $fz42;
      margin-bottom: 10px;
    }
  }
}
</style>
